<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-checkbox/paper-checkbox.html">
<link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="../../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="../meta-entries/meta-entries.html">
<link rel="import" href="../ref-embedded-behavior/ref-embedded-behavior.html">
<link rel="import" href="../genemo-styles.html">

<dom-module id="genemo-track-filter-pages">
  <template>
    <style include="genemo-shared-styles">
    :host {
      display: block;
      position: relative;
      height: 350px;
      font-family: 'Roboto', Arial, Helvetica, sans-serif;
      font-size: 12px;
    }
    iron-pages > div {
      height: 300px;
      overflow-y: auto;
      margin: 5px 0;
    }
    paper-checkbox {
      width: 150px;
      margin: 0.3em;
      overflow: hidden;
      vertical-align: middle;
      --paper-checkbox-label: {
        width: 124px;
      };
    }
    paper-tabs {
      --paper-tabs: {
        background: var(--light-primary-color);
      };
    }
  </style>
    <paper-tabs id="mainTabs" selected="{{selectedTab}}">
      <paper-tab>Experiment</paper-tab>
      <paper-tab>Tissue</paper-tab>
      <paper-tab>Cell Line</paper-tab>
      <paper-tab>Lab</paper-tab>
    </paper-tabs>

    <iron-pages id="listPages" selected="[[selectedTab]]">
      <div id="expPage">
        <template is="dom-repeat" items="[[expList]]">
          <paper-checkbox noink value="[[index]]">
            <span>[[item.name]]</span>
          </paper-checkbox>
        </template>
      </div>
      <div id="tissuePage">
        <template is="dom-repeat" items="[[tissueList]]">
          <paper-checkbox noink value="[[index]]">
            <span>[[item.name]]</span>
          </paper-checkbox>
        </template>
      </div>
      <div id="cellPage">
        <template is="dom-repeat" items="[[cellTypeList]]">
          <paper-checkbox noink value="[[index]]">
            <span>[[item.name]]</span>
          </paper-checkbox>
        </template>
      </div>
      <div id="labPage">
        <template is="dom-repeat" items="[[labList]]">
          <paper-checkbox noink value="[[index]]">
            <span>[[item.name]]</span>
          </paper-checkbox>
        </template>
      </div>
    </iron-pages>
  </template>
  <script>
  var GIVe = (function (give) {
    'use strict'

    Polymer({

      is: 'genemo-track-filter-pages',

      behaviors: [
        give.RefEmbeddedBehavior
      ],

      properties: {

        selectedTab: {
          type: Number,
          value: 0
        },

        initialized: {
          type: Boolean,
          value: false,
          readOnly: true
        },

        expList: {
          type: Array,
          value: function () {
            return []
          }
        },

        cellTypeList: {
          type: Array,
          value: function () {
            return []
          }
        },

        tissueList: {
          type: Array,
          value: function () {
            return []
          }
        },

        labList: {
          type: Array,
          value: function () {
            return []
          }
        },

        listOfLists: {
          type: Array,
          value: function () {
            return []
          }
        }

      },

      _setRefObj: function (refObj) {
        this._refObj = refObj
        this._clearForRef()
        if (this._refObj) {
          if (this._refObj.metaFilterInitialized) {
            this._loadRef(this._refObj)
          } else {
            // ref meta not loaded yet, push to scheduler
            give.mainTaskScheduler.addTask(new give.TaskEntry(
              this._loadRef.bind(this, refObj),
              [refObj.getCleanID() + '-meta-filter-ready']
            ))
          }
        }
      },

      _clearForRef: function () {
        this._setInitialized(false)
        this.listOfLists.splice(0, this.listOfLists.length)
        this.splice('expList', 0, this.expList.length)
        this.splice('tissueList', 0, this.tissueList.length)
        this.splice('cellTypeList', 0, this.cellTypeList.length)
        this.splice('labList', 0, this.labList.length)
      },

      _loadRef: function (ref) {
        // If user changes references too fast, it might happen that the
        // ref called by this function is not the one this element
        // is changed into right now
        if (this._refObj && ref && this._refObj.db === ref.db) {
          var key

          if (ref.metaFilter.expMap) {
            for (key in ref.metaFilter.expMap) {
              if (ref.metaFilter.expMap.hasOwnProperty(key)) {
                this.push('expList', { name: ref.metaFilter.expMap[key].name, ids: ref.metaFilter.expMap[key] })
              }
            }
            this.listOfLists.push(this.expList)
          }

          if (ref.metaFilter.tissueMap) {
            for (key in ref.metaFilter.tissueMap) {
              if (ref.metaFilter.tissueMap.hasOwnProperty(key)) {
                this.push('tissueList', { name: key, ids: ref.metaFilter.tissueMap[key] })
              }
            }
            this.listOfLists.push(this.tissueList)
          }

          if (ref.metaFilter.cellLineMap) {
            for (key in ref.metaFilter.cellLineMap) {
              if (ref.metaFilter.cellLineMap.hasOwnProperty(key)) {
                this.push('cellTypeList', { name: key, ids: ref.metaFilter.cellLineMap[key] })
              }
            }
            this.listOfLists.push(this.cellTypeList)
          }

          if (ref.metaFilter.labMap) {
            for (key in ref.metaFilter.labMap) {
              if (ref.metaFilter.labMap.hasOwnProperty(key)) {
                this.push('labList', { name: key, ids: ref.metaFilter.labMap[key] })
              }
            }
            this.listOfLists.push(this.labList)
          }

          this._setInitialized(true)
        }
      },

      getCurrentListMap: function () {
      // get the ids that corresponding to the current selection
        var result = []
        var resultMap = {}
        var checkboxList = Polymer.dom(this.$.listPages.selectedItem).querySelectorAll('paper-checkbox')
        for (var i = 0; i < checkboxList.length; i++) {
          if (checkboxList[i].checked) {
            result = result.concat(this.listOfLists[this.selectedTab][i].ids)
          }
        }

      // convert id to map
        result.forEach(function (id) {
          resultMap[id] = true
        })

        return resultMap
      },

      setAllCheckboxes: function (flag) {
      // set all checkboxes to one value (flag)
        var checkboxList = Polymer.dom(this.$.listPages.selectedItem).querySelectorAll('paper-checkbox')
        for (var i = 0; i < checkboxList.length; i++) {
          checkboxList[i].checked = flag
        }
      }

    })
    return give
  })(GIVe || {})
  </script>
</dom-module>
